<template>
  <div class="addUser-form">
    <form class="custom-form">
      <div class="form-item">
        <span>用 户 I D ：</span>
        <input class="input" v-model="form.UserId" type="text" placeholder="请输入用户ID">
      </div>
      <div class="form-item">
        <span>用户姓名：</span>
        <input class="input" v-model="form.Name" type="text" placeholder="请输入用户姓名">
      </div>
      <div class="form-item">
        <span>用户账号：</span>
        <input class="input" v-model="form.UserName" placeholder="请输入用户账号">
      </div>
      <div class="form-item">
        <span>用户密码：</span>
        <input class="input" v-model="form.Password" type="password" placeholder="请输入用户密码">
      </div>
      <div class="form-item">
        <span>用户角色：</span>
        <input class="input" v-model="form.Role" placeholder="请输入用户角色">
      </div>

      <div class="form-item">
        <span>部门名称：</span>
        <select class="input" v-model="form.Department" @click="fetchDepartments">
          <option v-for="dept in departments" :key="dept.depId" :value="dept.department">
            {{ dept.department }}
          </option>
        </select>
      </div>

      <!-- 提交状态消息 -->
      <div v-if="submitMessage" :class="['message', submitStatus]">
        {{ submitMessage }}
      </div>
      
      <button class="submit_btn" @click="submitUser" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '提交' }}
      </button>
    </form>
  </div>
</template>
<script>
import {addUser} from "@/js/login.js";
import {getListDept} from "@/js/Dept.js";

export default {
  data(){
    return{
      form: {
        UserId: '',
        Name: '',
        UserName: '',
        Password: '',
        Role: '',
        Department: '无'
      },
      departments: [],
      isSubmitting: false,
      submitMessage: '',
      submitStatus: ''
    }
  },
  methods: {
    submitUser(event) {
      event.preventDefault(); // 阻止表单默认提交行为
      
      // 表单验证
      if (!this.form.UserId || !this.form.Name || !this.form.UserName || 
          !this.form.Password || !this.form.Role) {
        this.submitMessage = '请填写所有必填字段';
        this.submitStatus = 'error';
        return;
      }
      
      this.isSubmitting = true;
      this.submitMessage = '正在提交...';
      this.submitStatus = 'pending';
      
      // 调用添加用户API
      addUser(
        this.form.UserId,
        this.form.Name,
        this.form.UserName,
        this.form.Password,
        this.form.Role,
        this.form.Department
      )
      .then(response => {
        if (response.code === 200) {
          this.submitMessage = '用户添加成功！';
          this.submitStatus = 'success';
          // 清空表单
          this.form = {
            UserId: '',
            Name: '',
            UserName: '',
            Password: '',
            Role: '',
            Department: '生产技术部'
          };
        } else {
          this.submitMessage = `添加失败: ${response.msg || '未知错误'}`;
          this.submitStatus = 'error';
        }
      })
      .catch(error => {
        console.error('添加用户出错:', error);
        this.submitMessage = '添加用户时发生错误，请稍后重试';
        this.submitStatus = 'error';
      })
      .finally(() => {
        this.isSubmitting = false;
      });
    },
    // 获取部门列表
    fetchDepartments() {
      if (this.departments.length === 0) { // 避免重复请求
        getListDept()
            .then(response => {
              console.log('获取部门成功:', response);
              if (response && Array.isArray(response)) {
                this.departments = response;
                if (response.length > 0) {
                  this.form.Department = response[0].department || ''; // 默认选中第一个
                }
              } else {
                console.error('获取部门失败: 返回数据格式不正确', response);
              }
            })
            .catch(error => {
              console.error('获取部门出错:', error);
            });
      }
  }
}}
</script>
<style scoped>
.addUser-form {
  padding: 10px;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.form-item >span{
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.custom-form{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.input{
  display: flex;
  align-items: center;
  width: 60%;
  height: 40px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 0 10px;
}
.submit_btn{
  width: 100%;
  max-width: 400px;
  height: 44px;
  background-color: #28a745;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
}
.submit_btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}
/* 消息样式 */
.message {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 500;
}
.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.pending {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}
.dept-list{
  width: 100%;
  max-height: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
</style>